<template>
  <div id="upload-tools">
    <template v-if="uploadType === 'one'">
      <!--  单图、头像上传 -->
      <el-upload
        ref="upload"
        v-loading="upLoading"
        element-loading-text="上传中"
        class="one-uploader"
        :action="uploadApi"
        :headers="uploadHeader"
        :data="upDataParams"
        :show-file-list="false"
        list-type="picture-card"
        :drag="true"
        :on-success="handleUploadSuccess"
        :before-upload="beforeUpload"
        :on-error="handleUploadError"
        :on-progress="onProgress"
      >
        <img v-if="imageUrl" :src="imageUrl" width="120" height="120" class="one-img" />
        <i v-else class="el-icon-plus one-uploader-icon"></i>
      </el-upload>
    </template>
    <template v-if="uploadType === 'more'">
      <!--  多图上传 -->
      <el-upload
        ref="upload"
        class="yang-upload-card"
        :class="customClass"
        :action="uploadApi"
        :file-list="fileList"
        list-type="picture-card"
        :multiple="true"
        :drag="true"
        :on-success="handleUploadSuccess"
        :on-error="handleUploadError"
        :before-upload="beforeUpload"
        :on-exceed="onExceed"
        :on-preview="handlePictureCardPreview"
        :on-remove="handleRemove"
        :limit="maxLimit"
        :headers="uploadHeader"
        :data="upDataParams"
      >
        <div class="flex justify-center align-center upload-card-text">
          <i class="el-icon-upload" style="margin: 0;"></i>
          <span>将文件拖到此处，或点击上传</span>
        </div>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <el-image width="100%" :src="imageUrl" alt="" lazy />
      </el-dialog>
    </template>
    <!--  文件上传 -->
    <template v-if="uploadType === 'file'">
      <el-upload
        ref="upload"
        v-loading="upLoading"
        :class="customClass"
        drag
        :action="uploadApi"
        multiple
        :on-success="handleUploadSuccess"
        :before-upload="beforeUpload"
        :on-error="handleUploadError"
        :on-exceed="onExceed"
        :show-file-list="showFileList"
        :on-remove="handleRemove"
        :on-progress="onProgress"
        :headers="uploadHeader"
        :data="upDataParams"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em> 点击上传</em></div>
        <div slot="tip" class="el-upload__tip">只能上传{{ fileFormat.join('、') }}文件，且不超过{{ maxSize }}M</div>
      </el-upload>
    </template>
  </div>
</template>

<script>
import uploadMixins from './mixins';

export default {
  name: 'YangUpload',
  mixins: [uploadMixins],
  props: {
    // 自定义组件样式节点class
    customClass: {
      type: String,
      default: '',
    },
    showFileList: {
      type: Boolean,
      default: false,
    },
    // 默认显示已上传的图片
    defaultUrl: {
      type: String,
      default: () => '',
    },
    // 默认显示已经上传的列表
    defaultList: {
      type: Array,
      default: () => [],
    },
    // 文件大小限制 1即表示1M, 默认10M
    maxSize: {
      type: Number,
      default: () => 10,
    },
    // 支持上传的文件格式列表
    fileFormat: {
      type: Array,
      default: () => ['jpg', 'png', 'jpeg', 'gif'],
    },
    // 上传类型
    uploadType: {
      type: String,
      default: () => 'one', // one 单张图片上传 more 多张图片上传 file 文件上传
    },
    // 当上传类型为 more时生效 最大上传数 默认10个
    maxLimit: {
      type: Number,
      default: 10,
    },
    // 上传时附带额外请求参数
    headerParams: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      imageUrl: '',
      videoUrl: '',
      dialogVisible: false,
      fileList: [],
      upDataParams: {},
    };
  },
  watch: {
    defaultUrl: {
      immediate: true,
      handler(val) {
        val && (this.imageUrl = val);
      },
    },
    defaultList: {
      immediate: true,
      handler(list) {
        if (list.length) {
          list.forEach((item) => {
            this.fileList.push({ url: item });
          });
        }
      },
    },
  },
  created() {
    this.upDataParams = { ...this.upDataParams, ...this.headerParams };
  },
  destroyed() {},
};
</script>

<style lang="less">
  // 单图上传 css
  .one-uploader {
    width: 148px;
    .el-upload {
      position: relative;
      overflow: hidden;
      cursor: pointer;
      border: 0;
      border-radius: 6px;

      .el-upload-dragger {
        width: 148px;
        height: 148px;
      }
    }
    .one-img {
      display: block;
      width: 148px;
      height: 148px;
    }
  }

  .yang-upload-card {
    .el-upload--picture-card {
      width: 360px;
      height: 180px;
    }
    .el-upload-list--picture-card .el-upload-list__item {
      width: 360px;
      height: 180px;
    }
  }

  .upload-card-text {
    height: 180px;
  }
</style>
